<script setup>
import { ref, onMounted, watch } from 'vue'
import { useFullscreen } from '@vueuse/core'
import hotkeys from 'hotkeys-js'
const emits = defineEmits(['changeAction'])
const { isFullscreen, toggle } = useFullscreen()
const isExpand = ref(false)
const isAuto = ref('auto')
const cursorStatus = ref('auto')
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  statsDetail: {
    type: Object,
    default: () => {
      return {}
    }
  },
  isStream: {
    type: Boolean,
    default: false
  }
})
watch(isFullscreen, (n) => {
  if (n) {
    console.log('全屏')
  }
})
onMounted(() => {
  hotkeys('shift+tab', (event) => {
    isExpand.value = !isExpand.value
    event.preventDefault()
  })
})
watch(
  isExpand,
  (n) => {
    if (n) {
      document.body.style.cursor = 'auto'
    } else {
      if (props.isStream) document.body.style.cursor = 'none'
    }
  },
  {
    immediate: true
  }
)
const changeSize = () => {
  emits('changeAction', {
    type: 'size'
  })
}
const changeCursor = () => {
  document.body.style.cursor = cursorStatus.value
}
defineExpose({
  isAuto
})
</script>
<template>
  <div class="action-menu flex" v-show="isExpand">
    <div class="w-[250px] h-full bg-[#111] p-[10px] space-y-[15px]">
      <div class="flex items-center justify-between">
        分辨率：
        <el-radio-group v-model="isAuto" size="small" @change="changeSize">
          <el-radio-button label="auto">自适应</el-radio-button>
          <el-radio-button label="full">全屏</el-radio-button>
        </el-radio-group>
      </div>
      <div class="flex items-center justify-between">
        鼠标：
        <el-radio-group v-model="cursorStatus" size="small" @change="changeCursor">
          <el-radio-button label="auto">显示</el-radio-button>
          <el-radio-button label="none">隐藏</el-radio-button>
        </el-radio-group>
      </div>
      <div class="flex items-center justify-between text-[#eee] cursor-pointer" @click="toggle">
        是否全屏：
        <span>{{ isFullscreen ? '退出全屏' : '全屏' }}</span>
      </div>
    </div>
    <div class="flex-1" @click="isExpand = false"></div>
  </div>
</template>
<style scoped lang="scss">
.action-menu {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 99;
  background: rgba(0, 0, 0, 0.3);
}
</style>
